<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            width: 300px;
            height: 130px;
            display: block;
            margin: 10px 0;
            border: 3px solid #444;
        }
    </style>
</head>

<body>
    <div id="app">

        <h3>小黑学习网</h3>

        姓名:
        <inPut type="text" v-model="name"></inPut>
        <br><br>

        是否单身:
        <input type="checkbox" v-model="isSingle">
        <br><br>
        <!-- 
    name: 给单选框加name 可以分组
    value 给单选框加value 用于提交后台属性
 -->
        性别:
        <input type="radio" name="gender" value="1" v-model="gender">男
        <input type="radio" name="gender" value="2" v-model="gender">女
        <br><br>
        <!-- 
    option需要设置value值,提交给后台
    select的value值 关联选中option的value值
 -->
        所在城市:
        <select name="" id="" v-model="city">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
            <option value="104">长沙</option>
        </select>
        <br><br>

        自我描述:
        <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
        <button>提交</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                name:'',
                isSingle:false,
                gender:1,
                city:104,
                desc:''
            }
        })
    </script>
</body>

</html>